<template>
  <div>
    {{dataArray.spiderForm.title}}
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="任务名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="采集入口网址">
        <el-input v-model="form.website" placeholder="请符合url格式，如http://www.baidu.com"></el-input>
      </el-form-item>
      <el-form-item label="表格行数据">
        <el-input v-model="form.myTr" placeholder="请输入xpath表达式，一般为'tr'或'tbody/tr'"></el-input>
      </el-form-item>

      <el-form-item :label="'表格列数据' + (index + 1)" v-for="(myTd, index) in form.myTd" :key="index">
        <el-col :span="11">
          <el-input v-model="myTd.td" placeholder="XPATH表达式,一般为'th/text()'或'td/text()'"></el-input>
        </el-col>
        <el-button v-if='index != 0' @click.prevent="removeDomain(myTd)">删除</el-button>
      </el-form-item>
      <el-button @click="addDomain" style="margin-bottom: 20px">新增字段</el-button>
      <el-form-item label="描述">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import {createTasks} from '../apis/api'
  export default {
    data () {
      return {
        dataArray: this.$store.state,
        form: {
          name: '',
          website: '',
          myTr: '',
          myTd: [{td: ''}],
          desc: ''
        }
        // endpointDB: this.$store.state.endpointDB
      }
    },
    methods: {
      onSubmit () {
        let _this = this
        let startUrls = JSON.stringify([this.form.website])
        let tdList = []
        _this.form.myTd.forEach(function (value) {
          tdList.push(value.td)
        })
        tdList = JSON.stringify(tdList)
        let tasksData = {
          name: _this.form.name,
          type_spider: '普通爬虫',
          type_template: '精确建库',
          type_business: '表格采集',
          proxy: '无',
          website: startUrls,
          myTr: _this.form.myTr,
          myTd: tdList,
          desc: _this.form.desc
        }
        createTasks(tasksData).then(response => {
          _this.$message({
            message: '创建成功',
            type: 'success'
          })
          _this.$store.dispatch('deleteTab', '1-6-2')
        }).catch(error => {
          console.log(error)
        })
      },
      addDomain () {
        this.form.myTd.push({td: ''})
      },
      removeDomain (item) {
        let index = this.form.myTd.indexOf(item)
        if (index !== -1) {
          this.form.myTd.splice(index, 1)
        }
      }
    }
  }
</script>
